<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content" class="text-000">影院详情</block>
    </cu-custom>
    <view class="bg-white fixed" scroll-y="true" style="width:100%">
      <view class="movie" style="width: 100%">
        <view class="flex justify-between padding">
          <view>
            <view class="text-000 text-bold text-lg margin-bottom-xs">{{ cinema_info.cinema_name }}</view>
            <view class="text-gray" style="width:600rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
              {{ cinema_info.address }}
            </view>
          </view>
          <view class="solid-left line-gray" @tap="openLocation()">
            <view class="iconfont icon-location text-black margin-top-xs text-000 text-xxl padding-left-lg"
                  style="font-size:35rpx;"></view>
            <view class="text-sm text-black padding-left-lg">导航</view>
          </view>
        </view>
        <!-- 影片列表 Start -->
        <view style="background: #3d424c;">
          <swiper :indicator-dots="indicatorDots" :current="swiperIndex" :autoplay="autoplay" style="height:360rpx;"
                  :circular="circular" :interval="interval" duration="duration" @change="change" previous-margin="140px"
                  next-margin="100px">
            <block v-for="(item,index) in movieList" :key="index">
              <swiper-item class="text-center flex justify-center align-center" @tap="clickChange(index)">
                <img :src="$tools.mThumb(imgurl+'/'+item.poster,250)"
                     :class="swiperIndex === index ? 'active' : 'quiet'" mode='aspectFill'
                     style="height:260rpx;width:220rpx"/>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <!-- 影片列表 END -->

        <!--        影片信息 start-->
        <view class="text-center padding-bottom-sm" v-if="currentMovie && currentMovie.info ">
          <view>
            <text class="inline-block text-lg text-bold margin-right margin-top-sm text-000">
              {{ currentMovie.info.show_name }}
            </text>
            <block v-if="currentMovie.info.remark!==''">
              <text class="introduce-grade text-bold text-lg text-orange">{{ currentMovie.info.remark }}</text>
              <text class="introduce-unit margin-left-xs">分</text>
            </block>
            <block v-else>
              <text class="text-gray">暂无评分</text>
            </block>
          </view>
          <view class="text-gray margin-auto text-left flex flex-wrap justify-center padding-lr-lg">
            <text>{{ currentMovie.info.duration }}分钟</text>
            <text class="margin-lr-xs">|</text>
            <text>{{ currentMovie.info.type }}</text>
            <text class="margin-lr-xs">|</text>
            <text>{{ currentMovie.info.leading_role }}</text>
          </view>
        </view>
        <!--        影片信息 end-->

        <!--        时间场次导航栏 start-->
        <view class="solid-bottom">
          <scroll-view class='solid-bottom text-gray overflow-hidden margin-top margin-bottom-xs'
                       v-if="currentMovie && currentMovie.date && currentMovie.date.length>0"
                       style="white-space:nowrap;width:100%;height:30px;" scroll-x="true">
            <view v-for="(item,index) in currentMovie.date" :key="index" class="padding-lr-sm inline-block"
                  :class="index===currentMovie.schedulesCurrentIndex ? 'date-curr':''" @tap="dateChange"
                  :data-index="index">
              <text class="padding-bottom-xs">{{ item }}</text>
            </view>
          </scroll-view>
        </view>
        <!--        时间场次导航栏 end-->
      </view>

      <view v-if="currentMovie.date&&currentMovie.date.length!==0"
            :style="{'overflow': 'auto','height': listHeigth+'px'}" style="padding-bottom:120rpx">
        <view class="flex justify-between padding" v-for="(item,index) in currentMovie.schedulesCurrent" :key="index">
          <!--时间场次开始-->
          <view class="flex">
            <view class="margin-right">
              <view class="text-000 text-bold margin-bottom-xs">{{ item.show_time }}</view>
              <view class="text-gray" style="white-space: nowrap">{{ item.close_time }}散场</view>
            </view>
            <view>
              <view class="text-black text-bold margin-bottom-xs">{{ item.show_version }}</view>
              <view class="text-gray" style="width:160rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                {{ item.hall_name }}
              </view>
            </view>
          </view>
          <!--/时间场次结束-->

          <!--价格购票开始-->
          <view class="flex align-center">
            <view class="margin-right-lg margin-left flex flex-direction">
              <text class="text-red text-bold text-lg "
                    style="white-space:nowrap;width:100%;height:30px;text-align:right">{{ item.price }}元
              </text>
              <view v-if="item.status === 1" class="flex ">
                <view class="text-sm">
                  <text class="text-white inline-block solid line-gray"
                        style="white-space: nowrap;background-color:#BFC4C8">市场价
                  </text>
                  <text class="text-gray inline-block solid line-gray padding-lr-xs" style="white-space: nowrap;">32元
                  </text>
                </view>
              </view>
              <view v-else class="text-gray text-sm flex justify-between" style="white-space:nowrap">
                <text>提前30分钟购买</text>
                <text class="iconfont icon-warn text-sm margin-top-xxs margin-left-xxs"></text>
              </view>
            </view>
            <view v-if="item.status===1">
              <button class="cu-btn radius-xxxl text-red" style="width:120rpx;background-color:#FCEDEF"
                      @tap="chooseSeat(item)">购票
              </button>
            </view>
            <view v-else>
              <view class="cu-btn text-gray radius-xxxl" style="width:120rpx;background-color:#E4EEF5">停售</view>
            </view>
          </view>
          <!--/价格购票结束-->
        </view>
      </view>
    </view>
    <!--订单为空开始-->
    <view v-if="currentMovie.date&&currentMovie.date.length===0" class="flex flex-direction text-center justify-center"
          :style="{'margin-top': movieHeight-65+'px'}">
      <img :src="$tools.j('empty@3x.png')" style="width:290rpx;height:280rpx" class="margin-lr-auto margin-top-xxl">
      <view class="text-gray">暂无排期~~</view>
    </view>
    <!--订单为空结束-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      indicatorDots: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      currentMovie: '',
      movieList: '',
      imgurl: '',
      cinema_id: '',
      show_id: '',
      swiperIndex: 0,
      circular: false,
      cinema_info: '',
      options: {},
      winHeight: 0,
      movieHeight: 0
    }
  },
  components: {},
  computed: {
    listHeigth() {
      if (this.winHeight && this.movieHeight) {
        console.log(this.winHeight + "," + this.movieHeight)
        return this.winHeight - this.movieHeight
      }
    },
  },
  created() {

  },
  onLoad(options) {
    //schedules?cinema_id=4464&shows_id=1344153
    console.log('onLoad(options)')
    console.log(options)
    this.options = options

    this.cinema_id = this.options.cinema_id
    this.show_id = this.options.show_id

    this.fetchData(true);

    // 模态框 提示
    uni.showModal({
      content: '尊敬的用户，为了更好的观影体验请您提前购票获取更低折扣',
      confirmText: '我知道了',
      confirmColor:'#F5222D',
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    })
  },
  onReady() {
    setTimeout(() => {
      let view = uni.createSelectorQuery().select(".movie");
      view.boundingClientRect((data) => {
        console.log(data)
        let height = Math.ceil(data.height) + data.top + 65
        console.log(height);
        this.movieHeight = height
      }).exec();
    }, 10)
    this.getHeight()
  },
  methods: {
    async getHeight() {
      let system = await this.$thirdApi.getSystemInfo()
      this.winHeight = system.windowHeight
      this.$nextTick(() => {
        console.log("渲染完成")
      })
    },
    async fetchData(onLoad = false) {
      console.log('请求参数')
      let {cinema_id, show_id} = this
      let res = await this.$api.schedules({cinema_id, show_id});
      console.log(res)
      this.currentMovie = {
        'info': res.data.show,
        'date': res.data.date,
        'schedules': res.data.schedules,
        'schedulesCurrent': res.data.schedules[0],
        'schedulesCurrentIndex': 0,
      }
      console.log(this.currentMovie)
      this.imgurl = res.data.imgurl
      this.movieList = res.data.list
      this.cinema_info = res.data.cinema_info
      this.show_id = res.data.show.show_id
      if (onLoad && this.show_id) {
        let swiperIndex = res.data.list.findIndex(v => v.show_id == this.show_id)
        this.swiperIndex = swiperIndex !== -1 ? swiperIndex : 0;
      }
    },
    /**
     * 影片切换
     *
     */
    change(e) {
      console.log('change.....');
      let index = e.detail.current
      console.log(index);
      this.doChange(index)
    },
    doChange(index) {
      this.swiperIndex = index;
      this.show_id = this.movieList[index]['show_id']
      this.fetchData();
    },
    clickChange(index) {
      this.doChange(index)
    },
    openLocation() {
      this.$thirdApi.openLocation({
        name: this.cinema_info.address,
        latitude: parseFloat(this.cinema_info.latitude),
        longitude: parseFloat(this.cinema_info.longitude)
      })
    },
    /**
     * 日期切换
     * @param e
     */
    dateChange(e) {
      console.log(e);
      console.log(this.currentMovie.schedules[index])
      let index = e.currentTarget.dataset.index
      this.currentMovie.schedulesCurrent = this.currentMovie.schedules[index]
      this.currentMovie.schedulesCurrentIndex = index;
    },
    /**
     * 选择座位
     * @param item
     */
    chooseSeat(item) {
      // console.log('选择座位');
      // console.log(item);
      this.$tools.goTo('/pages/seat/choose', {
        sid: item.sid,
        show_id: this.show_id,
        cinema_id: this.cinema_id,
        show_date: item.show_date,
        cinema_name: this.cinema_info.cinema_name
      })
    }
  }
  }
</script>

<style scoped>
.active {
  transform: none;
  transition: all 0.1s ease-in 0s;
  border: solid 1px #fff;
}

.quiet {
  transform: scale(0.9);
  transition: all 0.1s ease-in 0s;
}

swiper-item {
  width: 200 rpx !important;
  /*margin-right: 30 rpx !important;*/
}

.date-curr text {
  color: red;
  border-bottom: solid 2px #f00;
  font-weight: bold;
}

.fina {
  padding-bottom: 100 rpx
}
</style>